<template>
	<view class="body">
		<view class="head">
			<view class="avatarBox">
				<div class="avatar">
					<img :src="user.avatarImg" v-show="isLogin">
					<p v-show="!isLogin">未登陆</p>
				</div>
				<!-- <p>点击查看</p> -->
			</view
			
		</view>
		<view class="calculate" v-if="isLogin">
			<view>
				<p class="amount">{{user.exp}}</p>
				<p class="title">经验</p>
			</view>
			<view>
				<p class="amount">{{user.fans}}</p>
				<p class="title">粉丝</p>
			</view>
			<view>
				<p class="amount">{{user.subAmount}}</p>
				<p class="title">关注</p>
			</view>
		</view>
		<view class="setting" v-if="isLogin">
			<view @click="open('changeName')">
				<img src="../../static/icon/settings.png">
				<p class="title">昵称设置</p>
			</view>
			<view @click="open('history')">
				<img src="../../static/icon/history.png">
				<p class="title">历史记录</p>
			</view>
			<view @click="open('favourite')">
				<img src="../../static/icon/favourite.png">				<p class="title">收藏夹</p>
			</view>
			<view @click="open('changeAvatar')">
				<img src="../../static/icon/avatar.png">
				<p class="title">更换头像</p>
			</view>
		</view>
		<view class="upload" @click="toUpload()" v-if="isLogin">
			<p>发布您的视频</p>
		</view>
		<view class="upload" @click="clearS()" v-if="isLogin">
			<p>注销</p>
		</view>
		<view class="login" @click="open('login')" v-if="!isLogin">
			<zy-button :content="buttonContent"></zy-button>
		</view>
		<uni-drawer ref="favBox">
		    <view>
		        <view class="uni-title">收藏夹</view>
		    </view>
		</uni-drawer>
		<uni-drawer ref="historyBox" mode="right">
		    <view>
		        <view class="uni-title">历史记录</view>
		    </view>
		</uni-drawer>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="popup.type" :message="popup.message" :duration="popup.duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import button from '../components/zy-button.vue'
	export default{
		data(){
			return {
				popup:{
					type:'success',
					message:'成功',
					duration:2000
				},
				isLogin:false,
				//以下为默认值
				user:{
					avatarImg:"https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3140403455,2984550794&fm=26&gp=0.jpg",//头像url
					name:"胖der",//昵称
					coin:1314,//l币
					grade:"正式会员",//会员等级
					exp:"1.23k",
					fans:"1.25M",
					subAmount:'5'
				},
				historyBox:false,
				favBox:false,
				buttonContent:"点击登陆"
			}
		},
		onShow(){
			let key = uni.getStorageSync('libilibiUserKey');
			let user = uni.getStorageSync('libilibiUserBag');
			console.log(user);
			if(key==''){
				this.isLogin = false;
			} else {
				if(user!=null){
					this.isLogin = true;
					this.user = user;
				} else {
					let userBagRes = uni.request({
						url:this.config.serverUrl+'/mine/getInfo',
						method:'POST',
						data:{
							userId:key.userId,
							token:key.token
						}
					});
					// console.log(userBagRes);
					this.userBagRes[1].data.body.avatarImg = `${this.config.serverUrl}/this.userBagRes[1].data.body.avatarImg`;
					if(userBagRes[1].data.status){
						uni.setStorage({
							key:'libilibiUserBag',
							data:userBagRes[1].data.body
						});
						this.avatarImg = this.userBagRes[1].data.body.avatarImg;
						this.isLogin = true;
					}
				}
			}
		},
		methods:{
			getUserInfo(key){
				uni.request({
					url: this.config.serverUrl+'/mine/getInfo',
					method:'GET',
					data:key.userId
				}).then(async data=>{
					if(data.status){
						return new Promise((resolve,reject)=>{
							resolve(data.body)
						})
					} else {
						return new Promise((resolve,reject)=>{
							reject(data.content);
						}) 
					}
				})
			},
			clearS(){
					uni.clearStorage();
					this.popup.message = '已注销，请重新登陆!';
					this.popup.type = 'success';
					this.$refs.popup.open();
					setTimeout(()=>{
						uni.navigateTo({
							url:'../signIn/login'
						})
					},2000)
			},
			toUpload(){
				uni.navigateTo({
					url:`../upload/index`
				})
			},
			open(name){
				switch(name){
					case 'history':
						this.$refs.historyBox.open();
						break;
					case 'favourite':
						this.$refs.favBox.open();
						break;
					case 'changeName':
						uni.navigateTo({
							url:`./changeName?name=${this.user.name}`
						})
						break;
					case 'changeAvatar':
						uni.navigateTo({
							 url:`./changeAvatar?avatarImg=${encodeURIComponent(JSON.stringify(this.user.avatarImg))}`
						})
						break;
					case 'login':
						uni.navigateTo({
							url:'../signIn/login'
						})
						break;
				}
			},
			close(done){
				done();
			},
			confirm(done,value){
				//value 发送请求
				done();
			}
		},
		components:{
			uniDrawer,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			'zy-button':button
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		width:70%;
		margin-left:15%;
	}
	.head{
		width:100%;
		height:100px;
		background-color: white;
		overflow: hidden;
		position:relative;
		.avatarBox{
			margin-left:20px;
			margin-top:15px;
			display: block;
			width:70px;
			>p{
				font-size:10px;
				width:100%;
				display:block;
				color:#646566;
				text-align:center;
			}
			>.avatar{
				width:70px;
				height:70px;
				background-color: #646566;
				border-radius:100px;
				>p{
					width:70px;
					line-height: 70px;
					text-align: center;
					color:white;
					font-size:14px;
				}
				>img{
					width:100%;
					height:100%;
					border-radius:70px;
				}
			}
		}
		>.changeAvatar{
			position:absolute;
			font-size:8px;
			top:85px;
			left:20px;
			color:#646566;
		}
		>.name{
			position:absolute;
			left:100px;
			top:15px;
			font-size:18px;
		}
		>.grade{
			display:block;
			position:absolute;
			left:100px;
			top:45px;
			font-size:14px;
			color:$zy-libilibi-main;
			border:1px solid $zy-libilibi-main;
			border-radius:5px;
			padding:1px 3px 1px 3px;
		}
		>.coin{
			position:absolute;
			left:100px;
			top:70px;
			font-size:14px;
			color:rgba(0,0,0,0.4);
		}
	}
	.calculate{
		width:100%;
		height:90px;
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		>view{
			width:33%;
			height:100px;
			text-align: center;
			display:flex;
			flex-direction:column;
			>p{
				font-size:16px;
			}
			>.amount{
				font-weight:600;
				margin-top:10px;
			}
			>.title{
				margin-top:10px;
				color:#666666;
				font-weight:200;
			}
		}
	}
	.setting{
		width:100%;
		height:80px;
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;;
		>view{
			text-align: center;
			width:25%;
			>img{
				width:40px;
				height:40px;
			}
			>.title{
				color:#666666;
				font-weight:200;
				font-size:10px;
			}
		}
	}
	.upload{
		margin-top:20px;
		width:40%;
		margin-left:30%;
		height:30px;
		background-color: $zy-libilibi-main;
		border-radius:20px;
		display:flex;
		>p{
			margin:auto;
			color:white;
			font-weight:500;
			font-size:14px;
			letter-spacing: 2px;
		}
	}
</style>
